<template>
	<view class="category">
		<!-- 搜索 -->
		<searchLink></searchLink>
		<!-- 分类列表详情 -->
		<view class="content">
			<!-- 左盒子 -->
			<view class="content-title">
				<text v-for="(item,index) in categoryList" @click="activeCategory(index)" :class="{active:current===index}" :key="index">{{item.cat_name}}</text>
			</view>
			<!-- 右盒子 -->
			<scroll-view scroll-y="true" @scroll="scroll" :scroll-top="scrollTop">
				<view class="content-info">
					<image class="ad" src="../../static/images/titleImage.png" mode=""></image>
					<view class="info-item" v-for="(item,index) in categoryList[current].children" v-if="item.children" :key="index">
						<view class="title">
							/<text>{{item.cat_name}}</text>/
						</view>
						<view class="tags">
							<view v-for="(tagsItem,tagsIndex) in item.children" @click="goSearch(tagsItem.cat_name)" :key="tagsIndex"> 
								<image :src="tagsItem.cat_icon" mode=""></image>
								<text>{{tagsItem.cat_name}}</text>
							</view>
						</view>
					</view>

				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import searchLink from '@/components/search-link/search-link.vue'
	export default {
		components: {
			searchLink
		},
		data() {
			return {
				current: 0,
				categoryList: [],
				scrollTop: 0,
				old: {
					scrollTop: 0
				}
			}
		},
		onLoad() {
			this.getCategories()
		},
		// 检测用户下拉
		onPullDownRefresh(){
			uni.stopPullDownRefresh()
		},
		methods: {
			// 点击商品进行搜索
			goSearch(item){
				uni.navigateTo({
					url:'/pages/searchList/searchList?keyword='+item
				})
			},
			// 分类切换
			activeCategory(index) {
				this.current = index
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				})
			},
			// 获取分类和商品列表
			async getCategories() {
				this.categoryList = await this.$request({
					url: '/api/public/v1/categories'
				})
			},
			// 获取滚动条
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop
			}
		}
	}
</script>

<style lang="less">
	.category {
		.content {
			display: flex;
			position: absolute;
			top: 100rpx;
			left: 0;
			right: 0;
			bottom: 0;

			.content-title {
				width: 198rpx;
				display: flex;
				flex-wrap: wrap;
				overflow: auto;

				&::-webkit-scrollbar {
					display: none
				}

				text {
					width: 198rpx;
					height: 100rpx;
					line-height: 100rpx;
					color: #333;
					text-align: center;
					background-color: #f4f4f4;
					border-bottom: 1rpx solid #eee;

					&.active {
						background-color: #fff;
						color: #eb4450;
						font-weight: 700;
						position: relative;

						&::before {
							position: absolute;
							top: 20rpx;
							left: 0;
							content: '';
							width: 8rpx;
							height: 60rpx;
							background-color: #eb4450;
						}
					}
				}
			}

			.content-info {
				flex: 1;
				padding: 16rpx;
				overflow: auto;

				&::-webkit-scrollbar {
					display: none
				}

				.ad {
					width: 100%;
					height: 180rpx;
				}

				.info-item {
					.title {
						text-align: center;
						color: #e0e0e0;
						margin-top: 30rpx;

						text {
							margin: 0 30rpx;
							color: #333;
						}
					}

					.tags {

						margin-top: 15rpx;
						display: flex;
						flex-wrap: wrap;

						view {
							display: flex;
							flex-direction: column;
							align-items: center;
							width: 33.33%;
							font-size: 14px;

							image {
								width: 120rpx;
								height: 120rpx;
							}
						}
					}
				}
			}
		}
	}
</style>
